import {init, h} from 'snabbdom'
//1.导入模块
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'

const originalData = [
    {rank: 1, name: '田继光', value: 12000, des: '天赋异禀，武学奇才，整个高中界无人能敌，不过很少看见他的踪迹，不知道是不是失踪了。。。'},
    {rank: 2, name: '雷克斯', value: 10000, des: '家境贫寒，靠自己的努力一步一步打拼，现在是一家餐厅幕后老板，武器是及其残忍嗜血的阿瑞斯之手'},
    {rank: 3, name: '汪大东', value: 9000, des: '号称史上最强的高中生，拥有遇强则强的特殊体制，武器是龙纹鏊'},
    {rank: 4, name: '王亚瑟', value: 9000, des: '人称亚瑟王，是黑社会土龙帮太子爷，战斗力同样高达9000点，武器是封印着剑魔的石中剑'},
    {rank: 5, name: '丁小雨', value: 8500, des: '人称要命的小雨，左拳爆发核弹般的威力，传说他的右拳能打出左拳10倍的威力，不过会在3小时内失去战斗力变成麻瓜'}
]

let data = [
    originalData[0],
    originalData[1],
    originalData[2],
    originalData[3],
    originalData[4]
]

const koRow = item => {
    return h('div.row', {
        key: item.rank,
    },[
        h('div', {style: {fontWeight: 'bold'}}, item.rank),
        h('div', item.name),
        h('div', item.value),
        h('div', item.des)
    ])
}

const btns = () => {
    return [
        h('button', {on: {click: rankSortHandler}},'排行榜'),
        h('button', {on: {click: zhanliSortHandler}},'战斗力'),
        h('button', {on: {click: nameSortHandler}},'姓名')
    ]
}

const view = data => {
    return h('div', [
        h('h1', '高校ko榜排行'),
        h('div.btns', btns()),
        h('div.list', data.map(koRow))
    ])
}

let patch = init([style, eventlisteners]);
//app 模版
const app = document.querySelector('#app')

let vnode = patch(app, view(data))




function rankSortHandler () {
    data = data.sort((a, b) => {
        return a.rank > b.rank ? 1 : -1
    })
    vnode = patch(vnode, view(data))
}

function zhanliSortHandler () {
    data = data.sort((a, b) => {
        return a.value < b.value ? 1 : -1
    })
    vnode = patch(vnode, view(data))
}

function nameSortHandler () {
    data = data.sort((a, b) => {
        return a.name.localeCompare(b.name)
    })
    vnode = patch(vnode, view(data))
}



